<template lang="pug">
div.patienPart
  mt-select(v-bind="selectPartProps",v-model="part")
  mt-table(
    v-bind="tableProps"
  )
</template>

<script setup lang="ts">
import { type SelectProps, type TableProps } from "@scmt/common-components";
import { useRequest } from "@scmt/common-hooks";
import { useApi } from "@scmt/core-api";
import type { PartQueryParams } from "@scmt/api-pacs-part";
import type { RegistrationPartEntity } from "@scmt/api-pacs-registration-part";
//添加 Props属性
const props = defineProps({
  selectRegistration: Object,
});
//添加事件
const emit = defineEmits(["changPart"]);
const $api = useApi();
const part = ref("");
const queryPramas = reactive<PartQueryParams>({
  name: "",
  pageNum: 1,
  pageSize: 20,
});
const params = Object.assign(queryPramas);

const { request, data, loadingMap } = useRequest({
  tableData: (q: any) => {
    const params = Object.assign(queryPramas, q);
    return $api.pacs.part.query(params);
  },
  partOptions: $api.pacs.part.listByDeviceIdAsOptions,
});
/**
 * 表格数据
 */
const partTableData = ref<Array<RegistrationPartEntity>>([]);

const tableProps = computed(() => {
  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: partTableData.value,
    columns: [
      {
        prop: "partName",
        label: "检查部位",
        tooltip: true,
        minWidth: "120px",
      },
      {
        prop: "partCode",
        label: "部位编码",
      },
    ],
  };
  return tableProps;
});

/**
 * 部位选择下拉框属性
 */
const selectPartProps = computed<SelectProps>(() => {
  const props: SelectProps = {
    options: data.partOptions ?? [],
    placeholder: "请选择项目",
    separator: ",",
    multiple: true,
    filterable: true,
  };

  return props;
});
//监听订单改变
watch(
  () => props.selectRegistration?.id,
  (item) => {
    part.value = "";
    partTableData.value = [];
    data.partOptions = [];
    if (item) {
      //回显登记单项目
      if (
        props.selectRegistration?.registrationPartList &&
        props.selectRegistration?.registrationPartList.length > 0
      ) {
        props.selectRegistration?.registrationPartList.forEach((item: any) => {
          const project = ref<{} | RegistrationPartEntity>({});
          project.value = {
            id: item.id,
            partName: item.partName,
            partCode: item.partCode,
            registrationId: props.selectRegistration?.ids,
            createId: item.id,
          };
          let model = $api.pacs.registrationPart.$$createEntity(project.value);
          partTableData.value.push(model);
        });
        emit("changPart", partTableData.value);
      }
    }
  },
  {
    immediate: true,
  }
);
//监听设备改变
watch(
  () => props.selectRegistration?.deviceId,
  (item) => {
    if (partTableData.value.length > 0) {
      partTableData.value = partTableData.value.filter(
        (ii) => ii.createId != ""
      );
    } else {
      partTableData.value = [];
    }
    part.value = "";
    data.partOptions = [];
    if (item && item.trim().length > 0) {
      params.value = Object.assign(
        {
          deviceId: item,
        },
        queryPramas
      );
      request("partOptions", params.value);
    }
  },
  {
    immediate: true,
  }
);
//监听选项变
watch(
  () => part.value,
  (item) => {
    if (item) {
      if (partTableData.value.length > 0) {
        partTableData.value = partTableData.value.filter(
          (ii) => ii.createId != ""
        );
      } else {
        partTableData.value = [];
      }
      if (item && item.trim().length > 0) {
        let res = data.partOptions ?? [];
        if (res.length > 0) {
          let filter = res.filter((i) => item.indexOf(i.value + "") > -1);
          if (filter && filter.length > 0) {
            filter.forEach((ii) => {
              const project = ref<{} | RegistrationPartEntity>({});
              project.value = {
                id: ii.value,
                partName: ii.label,
                partCode: ii._raw?.partCode,
                registrationId: props.selectRegistration?.ids,
                deviceId: props.selectRegistration?.deviceId,
                createId: "",
              };
              let model = $api.pacs.registrationPart.$$createEntity(
                project.value
              );
              partTableData.value.push(model);
            });
            emit("changPart", partTableData.value);
          }
        }
      }
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.patienPart {
  height: 100%;
  display: flex;
  flex-direction: column;

  .mt-select {
    margin-top: 41px;
    margin-bottom: 10px;
  }

  .mt-table__pagination {
    display: none;
  }
}
</style>
